<script lang="ts" setup>
import { useDesignStore } from "@/stores/module/design";
import { NDivider } from "naive-ui";
import { toRefs, computed } from "vue";
import { useI18n } from "@/hooks/useI18n";

const { t } = useI18n();

const { setMenuMode, menuMode, getPrefixCls } = toRefs(useDesignStore());

const prefixCls = getPrefixCls.value("layout");

const isVertical = computed(() => menuMode.value === "vertical");
const isHorizontal = computed(() => menuMode.value === "horizontal");
</script>

<template>
  <NDivider> {{ t("design.layoutMode") }} </NDivider>
  <div :class="prefixCls">
    <div :class="`${isVertical ? 'custom-outline' : ''} ${prefixCls}-mode`" @click="setMenuMode('vertical')">
      <div :class="`${prefixCls}-mode__side`"></div>
      <div class="custom-flex">
        <div :class="`${prefixCls}-mode__header`"></div>
        <div :class="`${prefixCls}-mode__main`"></div>
      </div>
    </div>

    <div :class="`${isHorizontal ? 'custom-outline' : ''} ${prefixCls}-mode`" @click="setMenuMode('horizontal')">
      <div class="custom-flex">
        <div :class="`${prefixCls}-mode__header`" style="width: 5.25rem"></div>
        <div :class="`${prefixCls}-mode__main`" style="width: 5.25rem"></div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@prefix-cls:~ "@{namespace}-layout";
.@{prefix-cls} {
  @apply flex flex-items-center flex-justify-between;

  .custom-flex {
    @apply flex flex-col gap-2;
  }

  .custom-outline {
    outline: 2px solid #5f67f3;
  }

  &-mode {
    @apply w-24 h-16 p-1.5 flex gap-1.5 rd-1;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    &__side {
      @apply rd-1 h-13 w-4.5;
      background-color: #a3b6ff;
    }
    &__header {
      @apply w-15 h-4 rd-1;
      background-color: #646cff;
    }
    &__main {
      @apply rd-1 w-15 h-7.5;
      background-color: #c7d4ff;
    }
  }
  &-mode:hover {
    @apply cursor-pointer;
    .custom-outline();
  }
}
</style>
